As we apply jQuery to websites, we must always ask
ourselves how pages will look and function when JavaScript is
unavailable to our visitors (unless, of course, we know exactly who
every visitor will be and how their browsers will be configured). This
is not to say, however, that we can't create a more beautiful or
feature-full site for visitors with JavaScript turned on. The principle
of progressive enhancement
is popular among JavaScript developers because it respects the needs of
all users while providing something extra to most of them. To
demonstrate progressive enhancement with respect to forms, we'll create
a contact form that we can improve in both appearance and behavior
using jQuery.
Progressively enhanced form styling
First, let's make some
aesthetic tweaks to our form. Without JavaScript enabled, the form's
first fieldset is rendered like this:
While it certainly
appears functional, and contains plenty of information to guide the
user through each field, it could definitely stand some improvement.
We'll progressively enhance this group in three ways:
1. Modify the DOM to allow for flexible styling of the<legend>.
2. Change the required field message (required) to an asterisk (*) and the special field message (required only when the corresponding checkbox is checked)
to a double asterisk (**). Bold the label for each required field and
place a key at the top of the form explaining what the asterisk and
double asterisk mean.
3.
Hide each checkbox's corresponding text input on page load, and then
toggle them, visible and hidden, when the user checks and unchecks the
boxes.
We start with the<fieldset>'s HTML:
<fieldset>
<legend>Personal Info</legend>
<ol>
<li>
<label for="first-name">First Name</label>
<input class="required" type="text" name="first-name"
id="first-name" />
<span>(required)</span>
</li>
<li>
<label for="last-name">Last Name</label>
<input class="required" type="text" name="last-name"
id="last-name" />
<span>(required)</span>
</li>
<li>How would you like to be contacted?
(choose at least one method)
<ul>
<li>
<label for="by-email">
<input type="checkbox" name="by-contact-type"
value="E-mail" id="by-email" />
by E-Mail
</label>
<input class="conditional" type="text" name="email"
id="email" />
<span>(required when corresponding checkbox
checked)</span>
</li>
<li>
<label for="by-phone">
<input type="checkbox" name="by-contact-type"
value="Phone" id="by-phone" />
by Phone
</label>
<input class="conditional" type="text" name="phone"
id="phone" />
<span>(required when corresponding checkbox
checked)</span>
</li>
<li>
<label for="by-fax">
<input type="checkbox" name="by-contact-type"
value="Fax" id="by-fax" />
by Fax
</label>
<input class="conditional" type="text" name="fax"
id="fax" />
<span>(required when corresponding checkbox
checked)</span>
</li>
</ul>
</li>
</ol>
</fieldset>
One thing to note here is that each element or pair of elements is considered a list item
(<li>). All elements are placed within an ordered list (<ol>), and the checkboxes (along with their text fields) are placed within a nested unordered list (<ul>). Furthermore, we use the<label> element to indicate the name of each field. For text fields, the<label> precedes the<input>; for checkboxes, it encloses the<input>.
While there is no "standard" element structure for elements within a
fieldset, the ordered list seems to come as close as anything to
representing the semantic meaning of the items in a contact form.
With our HTML in place, we're now ready to use jQuery for the progressive enhancement.
